<template>
  <div>
    <h2>一、实验目的</h2>
    <p class="recontent">
      了解碳排放权和碳排放交易的概念，并通过实验理解供给、需求与市场价格之间的关系，掌握计算供需平衡点的方法。在实验过程中，学生应被分成买家和卖家两组，各自给出报价，并观察报价变化带来的供需曲线变化。本实验学时1学时，完成实验报告1学时。
    </p>
    <h2>二、实验内容</h2>
    <p class="recontent">
      碳排放需求与供给实验的实验内容主要是通过模拟市场机制来研究碳排放的需求和供给情况，探究不同政策和经济环境下碳排放的变化情况。具体实验步骤如下：
    </p>
    <a-collapse default-active-key="0" :bordered="false">
      <a-collapse-panel header="1. 设计实验方案：确定实验的目的、参与者、参数等。">
        <li class="recontent">
          目的：寻求碳排放权市场交易的供给与需求平衡点，以达成均衡价格。
        </li>
        <li class="recontent">参与者：学生。</li>
        <li class="recontent">
          参数：买家的购买数量和购买价格；卖家的卖出数量和卖出价格。
        </li>
      </a-collapse-panel>
      <a-collapse-panel header="2. 模拟碳排放市场：在实验中模拟一个碳排放市场，包括碳排放权的供应方、需求方和中介。">
        <li class="recontent">
          供应方：项目发展方、金融机构、咨询顾问、技术转让方、政策制定者。
        </li>
        <li class="recontent">需求方：政府机构、EU ETS安装方、自愿买方。</li>
        <li class="recontent">中介：经纪商、交易者、交易所、大型买方联监。</li>
      </a-collapse-panel>
      <a-collapse-panel header="3. 设定初始条件：设置初始数量、价格等初始条件。">
        <li class="recontent">买家的购买数量：0。</li>
        <li class="recontent">买家的购买价格：0。</li>
        <li class="recontent">卖家的卖出数量：0。</li>
        <li class="recontent">卖家的卖出价格：0。</li>
      </a-collapse-panel>
      <a-collapse-panel
        header="4.实施不同政策：通过实验，模拟不同政策下碳排放的需求和供给情况，如碳税、碳交易制度等。通过实施不同政策，并观察碳排放量和碳排放权价格的变化，可以更深入地理解碳排放需求和供给的关系，探究有效的碳排放管理措施。下面是列举出来的一些政策，我们的实验预计会采用其中一种政策应用到实验步骤中。">
        <li class="recontent">
          1.碳税：碳税是一种通过向碳排放行为征税的政策，可以提高碳排放成本，从而鼓励企业采取更环保的行为。在实验中，可以通过设定不同的碳税税率来模拟不同的碳税政策，然后观察碳排放量和碳排放权价格的变化情况。
        </li>
        <li class="recontent">
          2.碳排放交易制度：碳排放交易制度是一种将碳排放权交易引入市场机制的政策，可以通过设定碳排放权的数量和价格来控制碳排放量。在实验中，可以设置不同的碳排放权总量和初始价格，并观察市场中的碳排放量和碳排放权价格的变化。
        </li>
        <li class="recontent">
          3.能源效率政策：能源效率政策是一种通过提高能源利用效率来减少碳排放的政策，可以通过设定企业的能源利用效率目标、鼓励能源节约行为等方式来实施。在实验中，可以设定不同的能源效率政策，然后观察碳排放量和碳排放权价格的变化情况。
        </li>
        <li class="recontent">
          4.可再生能源政策：可再生能源政策是一种通过鼓励使用可再生能源来减少碳排放的政策，可以通过设定可再生能源的比例目标、提供补贴等方式来实施。在实验中，可以设定不同的可再生能源政策，然后观察碳排放量和碳排放权价格的变化情况。
        </li>
      </a-collapse-panel>
      <a-collapse-panel
        header="5.收集数据并分析：收集实验中的数据，如碳排放量、碳排放权价格等，并对数据进行统计和分析，以得出有关碳排放需求和供给变化的结论。以下是我们需要收集的数据部分。通过收集和分析这些数据，可以更好地理解碳排放需求和供给的关系，进而制定有效的碳排放管理措施。我们会在设计实验的部分专门设置一个模块用来展示所收集的数据。">
        <li class="recontent">
          1.碳排放量：需要记录市场中每个参与者的碳排放量，包括企业和政府等。可以通过对碳排放设备进行监测、对排放数据进行统计等方式来收集数据。然后可以分析不同政策下碳排放量的变化，以及市场上的碳排放量分布情况等。
        </li>
        <li class="recontent">
          2.碳排放权价格：需要记录市场中碳排放权的价格，可以通过市场交易数据来获得。可以分析不同政策下碳排放权价格的变化，以及市场上的碳排放权价格分布情况等。
        </li>
        <li class="recontent">
          3.市场结构：需要记录市场中参与者的数量和市场结构。可以分析不同市场结构对碳排放需求和供给的影响，以及市场结构变化对碳排放量和碳排放权价格的影响等。
        </li>
        <li class="recontent">
          4.经济指标：需要记录市场中的一些经济指标，如GDP、失业率等。可以分析不同经济环境下碳排放需求和供给的变化，以及碳排放对经济发展的影响等。
        </li>
        <li class="recontent">
          5.数据分析方法：可以采用统计学方法对收集到的数据进行分析，如回归分析、方差分析等。可以通过数据可视化工具，如图表、统计图等来呈现数据的变化趋势和关联关系。
        </li>
      </a-collapse-panel>
      <a-collapse-panel
        header="6.总结和讨论：总结实验结果，探讨不同政策和经济环境下碳排放需求和供给的变化情况，提出改进政策的建议。总结和讨论的内容可以有所不同，取决于实验的具体目的和研究者的关注点。总之，总结和讨论可以帮助研究者更好地理解实验结果、得出结论并提出改进措施，从而推动碳排放管理措施的进一步优化。我们将在我们实验进行的最后，进行结果的讨论分析。">
        <li class="recontent">
          1.实验结果总结：总结实验中不同政策下碳排放量、碳排放权价格和市场结构的变化情况，以及碳排放对经济指标的影响等。
        </li>
        <li class="recontent">
          2.结论讨论：探讨实验结果所反映的碳排放需求和供给的特点和关系，分析碳排放管理措施的有效性和局限性，进一步讨论如何制定更有效的碳排放政策等。
        </li>
        <li class="recontent">
          3.建议改进措施：根据实验结果和结论，提出改进碳排放管理措施的建议和方案，例如加强碳排放监测、提高碳税税率、增加可再生能源使用比例等。
        </li>
        <li class="recontent">
          4.实验的局限性：讨论实验的局限性，例如实验设计不足、实验样本不足等因素对实验结果的影响，以及未考虑到的其他可能影响碳排放的因素。
        </li>
        <li class="recontent">
          5.实验的应用前景：探讨实验的应用前景，例如实验结果对于碳排放政策的指导意义、对于碳排放市场的运作规则的启示等。
        </li>
      </a-collapse-panel>
    </a-collapse>
    <h2>三、实验原理</h2>
    <a-collapse default-active-key="0" :bordered="false">
      <a-collapse-panel header="1.需求规律">
        <h4 class="content">1.1 概念</h4>
        <p class="content">
          需求数量（需求量）：消费者在一定时期内愿意并能够购买的这种商品的数量
        </p>
        <p class="content">
          需求：一种商品的需求是指在其他因素不变的条件下，消费者在一定时期内各种可能的价格水平愿意并且能够购买的商品的数量。
        </p>
        <h4 class="content">1.2 需求曲线</h4>
        <p class="content">需求曲线：以几何图形来表示商品的价格和需求量的函数关系</p>
        <p class="content">横坐标：需求量 纵坐标：价格</p>
        <img class="content" style="margin-left: 100px" src="../assets/demand.png" alt="需求曲线" />
        <br />
        <br />
        <h4 class="content">1.3 需求定理</h4>
        <p class="content">
          需求定理：在其他因素不变的条件下，一种商品的价格上升，则对该商品的需求量减少
        </p>
      </a-collapse-panel>
      <a-collapse-panel header="2.供给规律">
        <h4 class="content">2.1 概念</h4>
        <p class="content">
          供给数量：生产者在一定时期内愿意并且能够提供出售的这种商品的数量。
        </p>
        <p class="content">
          供给：一种商品的供给是指在其他因素不变的条件下，生产者在一定时期内在各种可能的价格水平愿意并且能够提供出售的该商品的数量。
        </p>
        <h4 class="content">2.2 供给曲线</h4>
        <p class="content">类似地，供给曲线表示了供给量与价格的函数关系</p>
        <p class="content">横坐标：需求量 纵坐标：价格</p>
        <img class="content" style="margin-left: 100px" src="../assets/supply.png" alt="供给曲线" />
        <br />
        <br />
        <h4 class="content">2.3 供给定理</h4>
        <p class="content">
          供给定理：在其他因素保持不变的条件下，一种商品的价格上升，该商品的供给量增加。
        </p>
      </a-collapse-panel>
      <a-collapse-panel header="3.均衡价格">
        <p class="content">
          需求曲线说明了消费者对某种商品在每一价格水平的需求量;供给曲线说明了生产者对某种商品在每一价格水平的供给量
        </p>
        <p class="content">
          微观经济学中，商品价格指的是商品的均衡价格。商品的均衡价格是在商品的市场需求和市场供给这两种相反力量的相互作用下形成的。
        </p>
        <p class="content">均衡价格：市场需求量与供给量相同时的价格</p>
        <img src="../assets/equal.png" style="margin-left: 100px" alt="均衡价格" />
        <br />
      </a-collapse-panel>
    </a-collapse>
    <h2>四、实验步骤</h2>
    <a-button type="primary" ghost @click="restart" class="buttons">开始实验</a-button>
    <a-button type="primary" ghost @click="endtest" class="buttons">结束实验</a-button>
    <br />
    <br />
    <p class="content buttons">
      1. 实验开始，分为买家和卖家，用户可以点击下面两个按钮进行买家信息和卖家信息的录入:
    </p>
    <br />
    <a-button type="primary" ghost @click="showmaiform = true" class="buttons">我是买家</a-button>
    <a-modal v-model:visible="showmaiform" title="此次买方信息" @ok="maievent">
      <a-form :model="maiformtext" id="maiform">
        <a-form-item label="购买数量">
          <a-input clearable v-model:value="maiformtext.number" style="width: 180px" placeholder="请输入购买数量"></a-input>
        </a-form-item>
        <a-form-item label="购买价格">
          <a-input clearable v-model:value="maiformtext.cost" style="width: 180px" placeholder="请输入购买价格"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <hr />
    <p class="table-title">市场买入记录</p>
    <a-table :dataSource="marketMaiData" :columns="maiColumn" :pagination="{ pageSize: 5 }" bordered />
    <a-button type="primary" ghost @click="showsellform = true" class="buttons">我是卖家</a-button>
    <a-modal v-model:visible="showsellform" title="此次卖方信息" @ok="sellevent">
      <a-form :model="sellformtext" id="sellform">
        <a-form-item label="卖出数量">
          <a-input clearable v-model:value="sellformtext.number" style="width: 180px" placeholder="请输入卖出数量"></a-input>
        </a-form-item>
        <a-form-item label="卖出价格">
          <a-input clearable v-model:value="sellformtext.cost" style="width: 180px" placeholder="请输入卖出价格"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <hr />
    <p class="table-title">市场卖出记录</p>
    <a-table :dataSource="marketSellData" :columns="sellColumn" :pagination="{ pageSize: 5 }" bordered />
    <p class="content buttons">
      2. 买家和卖家的信息录入后，考虑到交易的公平性，排除极端价格:
    </p>
    <a-button type="primary" ghost @click="() => showvalueform = true" class="buttons">价格筛选</a-button>
    <a-modal v-model:visible="showvalueform" title="剔除极端价格" @ok="() => showvalueform = false">
      <a-form :model="valueformtext" id="valueform">
        <a-form-item label="最低价格">
          <a-input clearable v-model:value="valueformtext.min" style="width: 180px" placeholder="请输入最低价格"></a-input>
        </a-form-item>
        <a-form-item label="最高价格">
          <a-input clearable v-model:value="valueformtext.max" style="width: 180px" placeholder="请输入最高价格"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <p class="content buttons">
      3.
      在实验的过程中，统计买家数量和卖家数量和总的参与人数，以及当前的实验已经进行的时间等:
    </p>
    <a-descriptions title="实验详情" class="content" :column="4" bordered>
      <a-descriptions-item label="实验进行情况">
        <a-tag color="blue">{{ nowsitua }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="总的参与人数">{{
        mainumberarray.length + sellnumberarray.length
      }}</a-descriptions-item>
      <a-descriptions-item label="买家数量">{{
        mainumberarray.length
      }}</a-descriptions-item>
      <a-descriptions-item label="卖家数量">{{
        sellnumberarray.length
      }}</a-descriptions-item>
    </a-descriptions>
    <p class="table-title">供需曲线图</p>
    <div ref="chart" id="char" style="width: 800px; height: 600px"></div>
    <h2>五、实验结果</h2>
    <a-collapse default-active-key="0" :bordered="false">
      <a-collapse-panel header="1.实验设计和方法：">
        <p class="content">
          本实验采用了市场实验设计，共有{{ marketMaiNum + marketSellNum }}名参与者，其中{{ marketMaiNum }}名为卖家，{{ marketSellNum
          }}名为买家。买家和卖家在实验开始前接受了一次关于碳排放权交易的信息介绍，了解了碳排放权的概念和市场交易规则。实验采用了电脑模拟程序进行，参与者需在模拟交易平台上进行碳排放权交易，交易过程中需要进行价格竞价和数量选择，本实验暂时为免费平台。实验的主要指标为碳排放权的价格、交易量和总收益。
        </p>
      </a-collapse-panel>
      <a-collapse-panel header="2.分析结果：">
        <p class="content">
          实验结果显示，在本次实验中，碳排放权的均衡价格为{{ finalprice }}元/吨，买家和卖家的最优交易数量分别为{{ finalmainum }}吨和{{ finalsellnum }}吨。
        </p>
      </a-collapse-panel>
      <a-collapse-panel header="3.讨论结果：">
        <p class="content">
          根据实验结果，我们可以发现，碳排放权市场的供给和需求之间存在均衡价格，市场竞争的力量使得价格能够自我调整到一个相对稳定的水平。同时，交易手续费的支出也需要引起政策制定者和市场监管者的关注，以确保碳排放权市场的公平和透明。
        </p>
      </a-collapse-panel>
      <a-collapse-panel header="4.结论：">
        <p class="content">
          本实验结果表明，碳排放权市场的供给和需求之间存在均衡价格，市场竞争能够有效地调节市场价格。政策制定者和市场监管者应该加强碳排放权市场的监管和规范，鼓励更多的参与者参与碳排放权交易，以促进低碳经济的发展和环境保护。未来的研究可以进一步探讨碳排放权市场的发展趋势和政策影响。
        </p>
      </a-collapse-panel>
    </a-collapse>
    <h2>六、实验思考</h2>
    <a-collapse default-active-key="0" :bordered="false">
      <a-collapse-panel header="1.实验结果回顾：">
        <p class="content">
          本次实验旨在探究碳排放权市场的供给与需求之间的关系，通过模拟碳排放权交易，研究市场的价格和交易量等指标。实验结果显示，碳排放权市场具有均衡价格，市场竞争能够有效地调节市场价格。
        </p>
      </a-collapse-panel>
      <a-collapse-panel header="2.实验思考和分析：">
        <p class="content">
          从市场机制的角度来看，碳排放权市场的供给和需求之间存在均衡价格，这说明市场机制对于碳排放权交易的平衡和稳定具有重要作用。从政策影响的角度来看，政策的制定和实施对于碳排放权市场的发展和稳定也具有重要作用，政策的引导和监管能够促进市场的规范和透明。从参与者行为的角度来看，参与者的信息和操作对于市场价格和交易量也具有重要影响，这说明市场的参与者对于市场的运作和发展有着重要的影响力。
        </p>
      </a-collapse-panel>
      <a-collapse-panel header="3.局限性和未来研究：">
        <p class="content">
          本次实验的局限性主要在于样本数量和实验设置的简化程度，未来实验可以进一步扩大样本数量和增加实验设置的复杂程度，以提高实验的科学性和实用性。同时，未来的研究可以继续探讨碳排放权市场的发展趋势和政策影响，以及市场参与者的行为和决策等方面。
        </p>
      </a-collapse-panel>
      <a-collapse-panel header="4.结论和建议：">
        <p class="content">
          本次实验结果表明，碳排放权市场具有供给和需求之间的均衡价格，市场竞争能够有效地调节市场价格。政策制定者和市场监管者应该加强碳排放权市场的监管和规范，鼓励更多的参与者参与碳排放权交易，以促进低碳经济的发展和环境保护。未来的研究可以进一步探讨碳排放权市场的发展趋势和政策影响，以及参与者行为和决策等方面。
        </p>
      </a-collapse-panel>
    </a-collapse>
  </div>
  <a-spin :spinning="spinning">
    <div style="display: flex; justify-content: flex-end;margin-top: 20px;">
      <a-button type="primary" style="margin-right: 10px;" @click="submit">提交</a-button>
      <a-button @click="saveData">保存实验数据</a-button>
    </div>
  </a-spin>
</template>

<script lang="ts">
import { message } from "ant-design-vue";
import { ECharts, EChartsOption, init } from "echarts";
import html2canvas from "html2canvas";
import { useAccountStore } from "@/store";
import { toRaw } from "vue";
import { useExperimentStore } from '@/store/experiment'

export default {
  emits: ["submit"],
  data() {
    return {
      showvalueform: false,
      spinning: false,
      chart: null as any,
      finalprice: 0, //最终价格
      finalmainum: 0, //最终买家交易量
      finalsellnum: 0, //最终卖家交易量
      valueformtext: {
        min: 0,
        max: 0
      },
      nowsitua: "未开始", //实验进行时长
      showmaiform: false, //买家表格控制变量 //是否显示买家输入框
      showsellform: false, //卖家表格控制变量 // 是否显示卖家输入框
      mainumberarray: [], //买家数量信息
      maicostarray: [], // 买家费用信息
      maiinfo: [], //买家全部信息
      sellnumberarray: [], //卖家数量信息
      sellcostarray: [], //卖家费用信息
      sellinfo: [], //卖家全部信息
      maiformtext: {
        number: 0,
        cost: 0,
      }, //买入记录表格
      maiColumn: [
        {
          title: "交易id",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "价格",
          dataIndex: "price",
          key: "price",
        },
        {
          title: "数量",
          dataIndex: "num",
          key: "num",
        },
        {
          title: "交易时间",
          dataIndex: "time",
          key: "time",
        },
      ], //卖出记录表格
      sellColumn: [
        {
          title: "交易id",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "价格",
          dataIndex: "price",
          key: "price",
        },
        {
          title: "数量",
          dataIndex: "num",
          key: "num",
        },
        {
          title: "交易时间",
          dataIndex: "time",
          key: "time",
        },
      ], //市场买入记录
      marketMaiData: [], //市场卖出记录
      marketSellData: [], //我的交易记录
      marketMaiNum: 0, //市场买入记录的总数 主要是为了更新id
      marketSellNum: 0, //市场卖出记录的总数
      sellformtext: {
        number: 0,
        cost: 0,
      }, //卖家表格
      result: [], //计算结果
    };
  },
  mounted() {
    //this.setTime(); // 页面加载完成后开始计时
    this.initEcharts();
    //this.setScrollBar(); //调用JS调整滚动条样式
  },
  methods: {
    submit() {
      const self = this
      let imgUrl = ""
      this.$data.spinning = true;
      const experiment_id = "61"
      const { account } = useAccountStore()
      const { uploadImg } = useExperimentStore()
      html2canvas(document.getElementById("char")).then(function (canvas) {
        canvas.toBlob(
          function (blob) {
            imgUrl = uploadImg(blob, experiment_id, account.email.slice(0, account.email.indexOf("@")), "gongxu");
            console.log(imgUrl);
            const data = {
              // 此处为图片的链接，统一用image包裹，里面是图片名称：图片url
              // 这里的图片名称就是最终渲染到docx模板上的名称，需要统一
              image: {
                gongxu: imgUrl
              },
              // 此处为实验数据
              bought_in: toRaw(self.$data.marketMaiData),
              bought_out: toRaw(self.$data.marketSellData),
              status: self.$data.nowsitua,
              total: self.$data.mainumberarray.length + self.$data.sellnumberarray.length,
              buyer: self.$data.mainumberarray.length,
              seller: self.$data.sellnumberarray.length,
              finalprice: self.$data.finalprice,
              finalmainum: self.$data.finalmainum,
              finalsellnum: self.$data.finalsellnum
            }
            // 调用父组件的submit方法，并传递数据
            self.$emit('submit', data)
            // 关闭加载动画
            self.$data.spinning = false
          });
      });

    },

    saveData() {
      message.success("已保存")
    },
    getFormattedTime() {
      let currentDate = new Date();
      let year = currentDate.getFullYear(); // 获取年份
      let month = currentDate.getMonth() + 1; // 获取月份（注意月份从0开始，需要加1）
      let day = currentDate.getDate(); // 获取日期
      let hours = currentDate.getHours(); // 获取小时
      let minutes = currentDate.getMinutes(); // 获取分钟
      let seconds = currentDate.getSeconds(); // 获取秒钟
      // 格式化时间为字符串
      let formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return formattedTime;
    },
    maievent() {
      //买家事件
      if (this.nowsitua != "已开始") {
        message.info("请先开始实验");
        return;
      }
      this.showmaiform = false;
      this.marketMaiNum += 1; // 更新市场买入交易总数
      this.mainumberarray.push(this.maiformtext.number);
      this.maicostarray.push(this.maiformtext.cost);
      let mai_obj = {
        num: Number(this.maiformtext.number),
        cost: Number(this.maiformtext.cost),
      };
      let mai_datatable_obj = {
        id: this.marketSellNum + this.marketMaiNum,
        num: Number(this.maiformtext.number),
        price: Number(this.maiformtext.cost),
        time: this.getFormattedTime(), //获取当前时间
      };
      // 将mai_datatable_obj对象插入marketMaiData数组中
      this.marketMaiData.push(mai_datatable_obj);
      this.maiinfo.push(mai_obj);
      //this.calc_balancePoint();
      this.maiformtext.number = 0;
      this.maiformtext.cost = 0;
      message.success("买家信息录入成功");
      this.initEcharts();
    },
    sellevent() {
      //卖家事件
      if (this.nowsitua != "已开始") {
        message.info("请先开始实验");
        return;
      }
      this.showsellform = false;
      this.marketSellNum += 1;
      this.sellnumberarray.push(this.sellformtext.number);
      this.sellcostarray.push(this.sellformtext.cost);
      let sell_obj = {
        num: Number(this.sellformtext.number),
        cost: Number(this.sellformtext.cost),
      };
      let sell_datatable_obj = {
        id: this.marketSellNum + this.marketMaiNum,
        num: Number(this.sellformtext.number),
        price: Number(this.sellformtext.cost),
        time: this.getFormattedTime(), //获取当前时间
      };
      // 将sell_datatable_obj对象插入marketSellData数组中
      this.marketSellData.push(sell_datatable_obj);
      this.sellinfo.push(sell_obj);
      //this.calc_balancePoint();
      this.sellformtext.number = 0;
      this.sellformtext.cost = 0;
      message.success("卖家信息录入成功");
      this.initEcharts();
    },
    setTime() {
      //设置定时器
      this.clearTimeSet = setInterval(() => {
        this.browseTime++;
        this.initEcharts();
        //console.log(this.browseTime, "时长累计");
      }, 1000);
    },
    restart() {
      //开始实验
      if (this.nowsitua == "已开始") {
        message.info("实验已经开始");
      } else {
        this.nowsitua = "已开始";
        // 在开始新的实验时重置实验数据，这一步也可以放在endtest函数中做
        this.result = [];
        this.marketMaiData = [];
        this.marketSellData = [];
        message.info("开始新的实验");
        this.initEcharts();
      }
    },
    endtest() {
      //结束实验
      this.browseTime = 0;
      this.marketMaiNum = 0;
      this.marketSellNum = 0;
      this.sellnumberarray = [];
      this.sellcostarray = [];
      this.mainumberarray = [];
      this.maicostarray = [];
      this.sellinfo = [];
      this.maiinfo = [];
      this.nowsitua = "未开始";
      message.info("结束本次实验");
    },
    merge_cost() {
      //合并供给和需求报价，并从小到大排序
      var setobj = new Set(this.maicostarray);
      for (var i = 0; i < this.sellcostarray.length; i++) {
        setobj.add(this.sellcostarray[i]);
      }
      var cost = Array.from(setobj).sort(function (a, b) {
        var numA = Number(a); // 将 a 转换为数值类型
        var numB = Number(b); // 将 b 转换为数值类型
        if (isNaN(numA) || isNaN(numB)) {
          return 0; // 处理非数值情况，可以根据实际需求返回合适的值
        }
        return numA - numB;
      });
      //把去重后的报价填入到result数组中
      //在这里或许可以加上交易公平判断，目前没写
      for (var j = 0; j < cost.length; j++) {
        let res_obj = {
          value: Number(cost[j]),
          mai: 0,
          sell: 0,
          dist: 0,
        };
        if (
          Number(cost[j]) >= this.valueformtext.min &&
          (Number(cost[j]) <= this.valueformtext.max || this.valueformtext.max == 0)
        )
          this.result.push(res_obj);
      }
    },
    calc_balancePoint() {
      //需求方按照报价从高到低排序
      this.maiinfo.sort(function (a, b) {
        return b.cost - a.cost;
      });
      //供给方按照报价从低到高排序
      this.sellinfo.sort(function (a, b) {
        return a.cost - b.cost;
      });
      this.result.splice(0, this.result.length);
      this.merge_cost();
      //遍历result，计算供给方、需求方的供给量和需求量，存入result中
      var min = 99999;
      for (var i = 0; i < this.result.length; i++) {
        var value = this.result[i].value;
        //需求方：报价>=价格时进入市场
        for (var p_mai = 0; p_mai < this.maiinfo.length; p_mai++) {
          if (this.maiinfo[p_mai].cost >= value)
            this.result[i].mai += this.maiinfo[p_mai].num;
          else break;
        }
        //供给方：报价<=价格时进入市场
        for (var p_sell = 0; p_sell < this.sellinfo.length; p_sell++) {
          if (this.sellinfo[p_sell].cost <= value)
            this.result[i].sell += this.sellinfo[p_sell].num;
          else break;
        }
        this.result[i].dist = Math.abs(this.result[i].mai - this.result[i].sell);
        if (this.result[i].dist < min) {
          min = this.result[i].dist;
          this.finalprice = min;
          this.finalmainum = this.result[i].mai;
          this.finalsellnum = this.result[i].sell;
        }
      }
      // console.log(this.result);
    },
    initEcharts() {
      var buy = [];
      var sell = [];
      /*var xData=this.sellnumberarray
      var buy=this.maicostarray
      var sell=this.sellcostarray*/
      this.calc_balancePoint();
      for (let i = 0; i < this.result.length; i++) {
        buy[i] = [this.result[i].mai, this.result[i].value];
        //xData[i] = this.result[i].value
        //buy[i] = this.result[i].mai
        //sell[i] = this.result[i].sell
        sell[i] = [this.result[i].sell, this.result[i].value];
      }
      // console.log("xData")
      // console.log(xData)
      // console.log("buy");
      // console.log(buy);
      // console.log("sell");
      // console.log(sell);
      const charEle = document.getElementById("char") as HTMLElement;
      // console.log();
      const charEch: ECharts = init(charEle);
      const option: EChartsOption = {
        // xAxis: {
        //   data: xData,
        //   name: "市场价格"
        // },
        // legend: { // 图例
        //   data: ["需求", "供给"],
        //   bottom: "0%"
        // },
        // yAxis: {
        //   name: "供给量/需求量"
        // },
        // series: [
        //   {
        //     name: "需求",
        //     data: buy,
        //     type: "line", // 类型设置为折线图
        //     label: {
        //       show: true,
        //       position: "top",
        //       textStyle: {
        //         fontSize: 16
        //       }
        //     }
        //   },
        //   {
        //     name: "供给",
        //     data: sell,
        //     type: "line", // 类型设置为折线图
        //     label: {
        //       show: true,
        //       position: "top",
        //       textStyle: {
        //         fontSize: 16
        //       }
        //     }
        //   }
        // ]
        title: {
          text: "供需曲线",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["需求", "供给"],
        },

        xAxis: {
          // 根据x轴数据决定type类型
          type: "value",
          boundaryGap: false,
          name: "市场数量",
          // 注： x轴不指定data,自动会从series取
        },
        yAxis: {
          type: "value",
          name: "供给/需求价格",
        },
        series: [
          {
            name: "需求",
            type: "line",
            data: buy,
          },
          {
            name: "供给",
            type: "line",
            data: sell,
          },
        ],
      };
      charEch.setOption(option);
    },
  },
};
</script>

<style scoped>
.title {
  text-align: center;
  font-family: sans-serif;
  font-size: 30px;
}

.content {
  text-indent: 2em;
  margin-left: 20px;
  margin-right: 20px;
}

.subtitle-content {
  text-indent: 2em;
  margin-left: 15px;
  margin-right: 20px;
  font-size: large;
  font-weight: bold;
}

.table-title {
  text-indent: 2em;
  margin-left: 10px;
  margin-right: 20px;
  font-size: 16px;
  font-weight: bold;
  margin: 20px;
}

.guidance {
  position: absolute;
  right: 50px;
  font-weight: bold;
}

.buttons {
  text-indent: 0em;
  margin-right: 20px;
  display: inline-block;
}

.recontent {
  margin-left: 60px;
  margin-right: 20px;
}
</style>